<template>
  <div class="register">
    <login-top middleTop="注册bilibili" cutover="登入页面" @cutoverClicks="cutoverClicks" />
    <login-text
      name="姓名"
      label="姓名"
      placeholder="请输入姓名"
      style="margin:4.167vw 0px"
      type="text"
      :rule="rule"
      @inputChang="res=>{bliname = res}"
    />
    <login-text
      name="账号"
      label="账号"
      placeholder="请输入账号"
      type="text"
      :rule="rule"
      @inputChang="res=>{username = res}"
    />
    <login-text
      name="密码"
      label="密码"
      placeholder="请输入密码"
      type="password"
      :rule="rule"
      @inputChang="res=>{password = res}"
    />
    <login-btn btnText="注册" @registerSubmit="registerClick" />
  </div>
</template>

<script>
import LoginTop from "@/components/LoginTop";
import LoginText from "@/components/LoginText";
import LoginBtn from "@/components/LoginBtn";
export default {
  data() {
    return {
      bliname: "",
      username: "",
      password: "",
      rule: "^.{6,12}$"
    };
  },
  components: { LoginTop, LoginText, LoginBtn },
  methods: {
    async registerClick() {
      const rules = new RegExp(this.rule);
      if (
        rules.test(this.bliname) &&
        rules.test(this.username) &&
        rules.test(this.password)
      ) {
        const res = await this.$http
          .post("/register", {
            name: this.bliname,
            username: this.username,
            password: this.password
          })
          .then(res => {
            this.$notify({
              message: res.data.msg,
              color: "#ad0000",
              background: "#ffe1e1"
            });
            if (res.data.code === 200) {
              localStorage.setItem("id", res.data.id);
              localStorage.setItem("token", res.data.objtoken);
              this.$toast({
                message: "注册中..."
              });
              setTimeout(() => {
                this.$router.push("/userInfo");
              }, 1000);
            }
          });
      } else {
        this.$notify({
          message: "请输入正确的账号用户名密码！",
          color: "red",
          background: "#ffe1e1"
        });
      }
    },
    cutoverClicks() {
      this.$router.push("/login");
    }
  }
};
</script>

<style>
</style>